<template>
    <view class="container">
        <uni-section title="计算示例" type="line" padding>
            <button class="button" type="primary" @click="calculationDialogToggle">
                <text class="button-text">计算对话框</text>
            </button>
        </uni-section>
        <view>
            <!-- 计算示例 -->
            <uni-popup ref="calculationDialog" type="dialog">
                <uni-popup-dialog ref="calculationClose" mode="input" title="计算参数" :content="calculationContent"
                    @confirm="calculationConfirm">
                    <uni-forms :modelValue="calculationForm" :rules="calculationRules">
                        <uni-forms-item label="丝数" name="threadCount">
                            <uni-easyinput v-model="calculationForm.threadCount" type="number" placeholder="请输入丝数" />
                        </uni-forms-item>
                        <uni-forms-item label="台数" name="machineCount">
                            <uni-easyinput v-model="calculationForm.machineCount" type="number" placeholder="请输入台数" />
                        </uni-forms-item>
                    </uni-forms>
                </uni-popup-dialog>
            </uni-popup>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue';


const calculationDialog = ref(null);
const calculationForm = ref({
    threadCount: 0,
    machineCount: 0
});
const calculationRules = ref({
    threadCount: [
        { required: true, message: '请输入丝数' }
    ],
    machineCount: [
        { required: true, message: '请输入台数' }
    ]
});
const calculationContent = ref('请输入丝数和台数进行计算');


const calculationDialogToggle = () => {
    if (calculationDialog.value) {
        calculationDialog.value.open();
    }
};

const calculationConfirm = () => {
    const threadCount = parseInt(calculationForm.value.threadCount);
    const machineCount = parseInt(calculationForm.value.machineCount);
    if (!isNaN(threadCount) &&!isNaN(machineCount)) {
        const result = threadCount * Math.pow(2, machineCount);
        console.log(`结果: ${result}`);
        if (calculationDialog.value) {
            calculationDialog.value.close();
        }
    } else {
        uni.showToast({
            title: '请输入有效的数字',
            icon: 'none'
        });
    }
};
</script>